<template>
  <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item label="活动名称">
          <el-input v-model="name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select v-model="state" placeholder="选择商品状态">
            <el-option label="上架" value="0"></el-option>
            <el-option label="下架" value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="shousuo">搜索</el-button>
          <el-button type="primary">导出报表</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
   
      <el-table highlight-current-row :data="dataList" style="width: 100%;">
        <!-- <el-table-column type="index" width="60">
        </el-table-column>-->
        <el-table-column label="商品" width="400">
          <template scope="scope">
            <div style="height:60px;padding-top:10px;">
             <img :src="scope.row.images" style="width:50px;height:50px;float:left;margin-right:5px;">
						 <div>{{scope.row.name}}</div>
             </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格">
						<template scope="scope">
               {{scope.row.price/100}} 元
            </template>
				</el-table-column>
        <el-table-column align="center" min-width="200" label="库存">
           <template scope="scope">
              <div>
                <el-button @click="kucun(scope.row.id,'del',scope.row.amount)" size="mini">减少库存</el-button>
                <span style="display:inline-block;width:70px;">{{scope.row.amount}}</span>
                <el-button @click="kucun(scope.row.id,'add',scope.row.amount)" size="mini">增加库存</el-button>
              </div>
          </template>
        </el-table-column>
				<el-table-column align="center" prop="saleCount" label="销量" ></el-table-column>
        <el-table-column align="center" label="重量">
						<template scope="scope">
               {{scope.row.weight/1000}} kg
            </template>
				</el-table-column>

        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
              <span v-if="scope.row.state==0">上架</span>
							<span v-if="scope.row.state==-1">下架</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button v-if="scope.row.state==0" @click="sxj(scope.row.id,-1)" type="text" size="small">下架</el-button>
            <el-button v-if="scope.row.state==-1" @click="sxj(scope.row.id,0)" type="text" size="small">上架</el-button>
            <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
			
     <div style="padding:20px;text-align:center;">
            <el-pagination
            background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>  

     <el-dialog
      title="增加库存"
      :visible.sync="addDiv"
      custom-class="addDiv"
      width="20%"
      >
      新增：<el-input style="width:200px;" v-model="addNum"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDiv = false">取 消</el-button>
        <el-button type="primary" @click="addDiv = false;changeNum('add')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="减少库存"
      :visible.sync="delDiv"
      custom-class="addDiv"
      width="20%"
      >
      减少：<el-input style="width:200px;" v-model="delNum"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDiv = false">取 消</el-button>
        <el-button type="primary" @click="delDiv = false;changeNum('del')">确 定</el-button>
      </span>
    </el-dialog>

  </section>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      state: "",
			name: "",
			total:0,
      page: 1,
      size: 10,
      dataList: [],
      addDiv:false,
      delDiv:false,
      addNum:0,
      delNum:0,
      id:'',
      amount:0
    };
  },
  methods: {
    //获取列表
    shousuo: function() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          "Authorization": sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          "domain": "taobao.tianyalei.com"
        },
        url: "/goods?page="+(that.page-1)+"&size="+that.size+"&name="+that.name+"&state="+that.state
      }).then(function(response) {
        if (response.data.code == 200) {
					that.dataList = response.data.data.list;
					that.total=response.data.data.totalCount;
          for(var i=0;i<that.dataList.length;i++){
						 if(that.dataList[i].images){
							  that.dataList[i].images=that.dataList[i].images.split(',')[0]
						 }else{
							  that.dataList[i].images='../../../static/nopic.jpg'
						 }
					}
        }
      });
    },
		edit(id){
			this.$router.push({ 
        path:'/index',
        query: {
            id:id
        }
      })
    },
    sxj(id,state){
       let that=this;
       this.axios.put('/goods', 
				this.qs.stringify({id:id,state:state}), {
						headers: {
							'Authorization':sessionStorage.getItem("token"),
							'Content-Type':'application/x-www-form-urlencoded',
							'domain':'taobao.tianyalei.com'
						}
         })
					.then(function (response) {
						if(response.data.code==200){ 
								that.$message({
									message:'提交成功',
									type: 'success'
								});  
								that.shousuo();
							}
						})
    },
    // 删除
    del(id) {
			 let that=this;
			 this.$confirm('确定要删除此商品吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
						that.axios({
						url: "/goods/"+id,
						method: "Delete",
						headers: {
							"Authorization": sessionStorage.getItem("token"),
							"Content-Type": "application/x-www-form-urlencoded",
							"domain": "taobao.tianyalei.com"
						}
					})
						.then(response => {
							if (response.data.code ==200) {
								that.$message({
									message: "删除成功",
									type: "success"
								});
								that.shousuo();
							} 
						})
					
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
				});
			
    },
    kucun(id,isadd,num){
      this.id=id;
      this.amount=num;
      if(isadd=='add'){
         this.addDiv=true;
      }else{
         this.delDiv=true;
      }
    },
    changeNum(isadd){
      if(isadd=='add'){
         this.amount=Number(this.amount)+Number(this.addNum);
      }else{
         this.amount=Number(this.amount)-Number(this.delNum);
      }
      let that=this;
       this.axios.put('/goods', 
				this.qs.stringify({id:this.id,amount:this.amount}), {
						headers: {
							'Authorization':sessionStorage.getItem("token"),
							'Content-Type':'application/x-www-form-urlencoded',
							'domain':'taobao.tianyalei.com'
						}
         })
					.then(function (response) {
						if(response.data.code==200){ 
								that.$message({
									message:'库存修改成功',
									type: 'success'
								});  
								that.shousuo();
							}
						})
    },
		handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size=val;
        this.shousuo();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val;
        this.shousuo();
      }
    
  },

  created() {
    this.shousuo();
  }
};
</script>
<style>
.addDiv {width:300px;}
</style>

